<template>
  <div id="app">
    <h1 ref="app">----------我是APP页面-----------</h1>
    <h4>{{schoolName}}</h4>
    <h4>{{schoolName02}}</h4>
    <h4>{{homeMsg}}</h4>
    <!-- 通过父给子传递函数类型的props实现父给子传递数据 -->
    <!-- 自定义事件:子传父 -->
    <School :getSchoolMsg="getSchoolMsg"
            @jason="receiveSchool"
            @demo="m1"></School>
    <!-- 子传父的方式：自定义事件第一种方式：给指定事件指定自定义事件haha-->
    <!-- <Home @haha="childEvent"
          :fatherMsg="fatherMsg" /> -->
    <!-- 子传父第二种方式： 给子组件打ref-->
    <Home ref="home"
          :fatherMsg="fatherMsg" />
  </div>
</template>

<script>
/* 
父子间通信：
  一.父给子传递:
    1.1 props
  二.子给父传递：
    2.1 props(父给子传递一个方法过去)
    2.2 自定义事件(在组件上)
        这两种方法的相同点:都得定义一个事件接收
        不同点:props传递方法需要接收
               自定义事件不用接收
    2.3 ref(子组件上给ref属性)           
 */
import Home from "../src/components/Home.vue"
import School from "../src/components/School.vue"

export default {
  name: 'App',
  components: {
    Home,
    School
  },
  data () {
    return {
      fatherMsg: "我是APP组件传过去的信息",
      schoolName: '',
      schoolName02: '',
      homeMsg: ''
    }
  },
  methods: {
    childEvent (childMsg) {
      console.log(childMsg);
      this.homeMsg = childMsg
    },
    getSchoolMsg (name) {
      console.log(name);
      this.schoolName = name
    },
    // 自定义事件接收多个参数
    // 1.子组件传多少个就接收多少个，这种不推荐
    // 2.子组件里将多个参数放入对象或数组里
    // 3.ES6语法:...rest
    receiveSchool (name, ...params) {
      // params就是一个数组：ES6语法将其余参数全部放入一个数组里面params里
      console.log(name, params);
      this.schoolName02 = name
    },
    m1 () {
      console.log("demo事件被触发了");
    }
  },
  mounted: function () {
    // console.log(this.$refs.app);//<h1>我是APP页面</h1>
    // console.log(this.$refs.home);
    // 1.通过ref拿到非常灵活，可以延时再获取，而自定义事件不可以
    // setTimeout(() => {
    //   this.$refs.home.$on('haha', this.childEvent)
    // }, 3000)
    // 2.$once只触发事件一次
    this.$refs.home.$once('haha', this.childEvent)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background-color: lightgray;
}
</style>
